<template>
	<div class="article">
		<div class="article-tab">
			<span class="tab-item" :class="{'tab-active':tab === 0}" @click="handleTab(0)">文章分组管理</span>
			<span class="tab-item" :class="{'tab-active':tab === 1}" @click="handleTab(1)">上下架</span>
		</div>
		<!-- 分组管理 start -->
		<div class="con-warrp" v-if="tab === 0">
			<div class="left-con">
				<div class="top-bar">
					<span class="el-icon-warning edit-icon"></span>
					合理设置文章分类能方便进行及时的管理
				</div>
				<div class="group-name">
					<span class="group-item">分组名称</span>
					<span class="group-item">{{groupTitle}}</span>
					<el-popover
					  v-if="groupTitle !=='全部文章'"
					  placement="bottom"
					  title="分组名称"
					  width="200"
					  v-model="showUpdate"
					  trigger="click">
					  <el-input size="mini" v-model="updateName" placeholder="请输入分组名" style="margin-bottom: 8px;"></el-input>
					  <el-button size="mini" type="primary" @click="updateGroup">确定</el-button>
					  <el-button size="mini" @click="showUpdate = false">取消</el-button>
					  <span slot="reference" class="group-item edit-item">编辑</span>
					</el-popover>						
					<span v-if="groupTitle !=='全部文章'" class="group-item edit-item" @click="deleteGroup">删除</span>
				</div>
				<div class="filter">
					<span>排序方式</span>
					<el-select v-model="sortType" @change="amendSortType" placeholder="请选择" size="small">
				    	<el-option
					      v-for="item in options"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
				    	</el-option>
				  	</el-select>
				  	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;					
				  	<span>设置版式</span>
				  	<span class="select" @click.stop="handlePlate">
				  		{{plat}}				  		
				  		<div class="option-warrp" v-show="plates">
				  			 <el-scrollbar style="box-shadow: 2px 2px 6px #ccc">
					  			<ul class="option">
						  			<li class="option-item"
						  			@mouseleave="showPlate = false" 
						  			@mouseenter="getPlatePic(index)"
						  			@click.stop="setFormat(item)"
						  			v-for="(item,index) in plateList"
						  			>{{item.title}}</li>
						  		</ul>
					  		</el-scrollbar>
					  		<div class="item-pic" v-show="showPlate">
					  			<img :src="platePic" width="100%">
					  		</div>
				  		</div>				  		
				  	</span>
<!-- 					<el-select v-model="selectPlate" @change="setFormat" placeholder="请选择" size="small">
				    	<el-option
					      v-for="item in plate"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
				    	</el-option>
				  	</el-select> -->			
				</div>
				<div class="operation">
					<el-select style="width:150px;" :disabled="disabled" v-model="selectArt" placeholder="添加到该组" size="small" @visible-change="addToGroup">
				    	<el-option
					      v-for="item in group"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
				    	</el-option>
				  	</el-select>
				  	<el-button size="small" @click="removeGroup">移出此组</el-button>
		<!-- 		  	<el-button @click="addArticle" class="add-btn" size="small" icon="el-icon-plus">添加文章到该组</el-button> -->
				</div>
				<div class="table">
					<el-table
					  @selection-change="handleSelect"
					  v-loading="loading"
					  :data="readerList"				      
				      style="width: 100%">
				      <el-table-column
				      	type="selection"
				      	width="55">
				      </el-table-column>
					  <el-table-column
				        prop="title"
				        label="标题"
				        width="">
				      </el-table-column>
				      <el-table-column
				        prop="created"
				        label="添加时间"
				        width="220">
				      </el-table-column>
				      <el-table-column
				        label="所属分组"
				        width="180">
				        <template slot-scope="scope">
					     	<span>{{groupTitle}}</span>
					    </template>				        
				      </el-table-column>
				    </el-table>
				    <el-pagination
				      v-if="readerList.length"
				  	  style="margin-top: 20px;"
					  :page-size="pageSize"
					  layout="prev, pager, next"
					  :total="totalCount"
					  :current-page.sync="currentPage1"
					  @current-change="goPage"
					 >
				   	</el-pagination>
			    </div>
			</div>
			<div class="right-con">
				<p class="group-title" @click="changeGroup('all')" :class="{'gactive':gcurrent === 'all'}">全部文章</p>
				<p class="group-title" 
				   :class="{'gactive':gcurrent === index}"
				   @click="changeGroup(index,item)"
				   v-for="(item,index) in groupList">
					{{item.title}}
				</p>
				<div class="btn">
					<el-popover
					  placement="bottom"
					  title="分组名称"
					  width="200"
					  v-model="showAdd"
					  trigger="click">
					  <el-input size="mini" v-model="groupName" placeholder="请输入分组名" style="margin-bottom: 8px;"></el-input>
					  <el-button size="mini" type="primary" @click="createGroup">确定</el-button>
					  <el-button size="mini" @click="showAdd = false">取消</el-button>
					  <p slot="reference"><span class="el-icon-plus"></span>新建分组</p>
					</el-popover>					
				</div>
			</div>
		</div>
		<!-- 分组管理 end -->
		<div class="on-shelf" v-show="tab === 1">
			<div class="filter-con">			
<!-- 				<div class="filter-item">
					<p class="title">所属分组</p>
					<el-select v-model="serGroup" placeholder="请选择">
						<el-option
					      v-for="item in group"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
				    </el-select>
				</div>	 -->			
				<div class="filter-item">
					<p class="title">标题</p>
					<div class="ipt-warrp">
						<el-input style="width:200px" v-model="serTitle" placeholder="请输入要搜索的标题"></el-input>		       	
					</div>	
				</div>					
								
				<div class="filter-item">
					<p class="title"></p>
					<div class="btn" @click="handleSearch()">搜索</div>
				</div>
			</div>
			<div class="shelf-con">
				<div class="tab-con">
					<span class="tab-item" :class="{'active':tcurrent === 1}" @click="changeStatu(1,1)">已上架文章</span>
					<span class="tab-item" :class="{'active':tcurrent === 2}" @click="changeStatu(2,0)">未上架文章</span>
				</div>
				<div class="operat-con">
					<div class="left-btn" 
					v-show="tcurrent === 1"
					:class="{'l-active':selectArr.length > 0}"  
					@click="lowerFreme('1')">下架</div>
					<div class="left-btn" 
					v-show="tcurrent === 2"
					:class="{'l-active':selectArr.length > 0}"  
					@click="lowerFreme('0')">上架</div>
					<div class="left-btn" 
					v-show="tcurrent === 2"
					:class="{'l-active':selectArr.length > 0}"  
					@click="delFreme">删除</div>
				</div>
			</div>
			<el-table
				v-loading="loading"
				@selection-change="handleSelectionChange"
				:data="readerList"
			    style="width: 100%">
				<el-table-column
			      type="selection"
			      width="55">
			    </el-table-column>
			    <el-table-column
			      prop="title"
			      label="商品"
				>
			    </el-table-column>
			    <el-table-column
			      prop="created"
			      label="创建时间"
			      width="220"
			      sortable
			      :row-style="'text-align:right'">
			    </el-table-column>			    				    
			     <el-table-column
			      label="操作"
			      width="170">
			      	<template slot-scope="scope">
			      		<p class="op-btn" v-show="tcurrent === 1" @click="singleUnd(scope.row.id,'1')">下架</p>
			      		<p class="op-btn" v-show="tcurrent === 2" @click="singleUnd(scope.row.id,'0')">上架</p>
			      	</template>
			    </el-table-column>			    
			</el-table>
			<div class="page" v-if="readerList.length" style="margin: 20px auto;">
			  	<el-pagination
			  	  style="margin: auto;"
				  :page-size="pageSize"
				  layout="prev, pager, next"
				  :total="totalCount"
				  :current-page.sync="currentPage"
				  @current-change="goPage1"
				 >
			   </el-pagination>
			</div>
		</div>
		<!-- 添加文章的弹出框 -->
		<el-dialog title="收货地址" :visible.sync="addDialog">
		  <el-table >
		    <el-table-column property="date" label="日期" width="150"></el-table-column>
		    <el-table-column property="name" label="姓名" width="200"></el-table-column>
		    <el-table-column property="address" label="地址"></el-table-column>
		  </el-table>
		</el-dialog>
	</div>
</template>
<script>
	import {getCookie} from '../../../../assets/js/cookie.js'
	export default{
		name: 'articleM',
		data(){
			return{
				showPlate   : false,
				plates      : false,
				addDialog   : false, //添加文章的模态框
				disabled    : true,
				loading     : true,
				serGroup    : '',
				selectArt   : [], //添加到分组
				groupTitle  : '全部文章', //默认分组名称
				groupId     : 'all',     //默认分组id
				tab     	: 0,
				loading 	: true,
				//selectPlate : '',
				sortType    : '',
				options  : [
					{
						label : '浏览量',
						value : 1
					},					
					{
						label : '上架时间',
						value : 2
					}					
				],
				readerList : [], //必读列表
				groupList  : [], //分组列表
				current  : '',
				page     : 1,		//页码
				page1    : 1,
				pageSize : 5,		//每页多少条
				currentPage:1,
				currentPage1:1,
				totalCount : 0,
				groupName : '',		//新建分组的名称
				updateName: '',		//更新分组的名称
				showAdd   : false,
				showUpdate: false,
				tcurrent  : 1,
				serTitle  : '',

				tableList : [],   //文章列表
				selectArr : [],	  //【批量选择
				plateList : [],	  //版式
				gcurrent  : 'all',//当前选择的分组
				selectList: [] ,   //所选择的文章列表
				plat      : '请选择',
				platePic  : '',
				status    : '1',
				groupId   : 'all'
			}
		},
		props:['data'],
		mounted(){
			this.uid 	 = getCookie('UID')
			this.token   = getCookie('TOKEN')
			this.shop_id = this.data.id
			this.getReaderList()
			this.getGroup()
			this.getPlateList()
			this.closeOptions()
		},
		computed:{
			group(){
				let group = []
				this.groupList.forEach( item => {
					group.push({
						label : item.title,
						value : item.id
					})
				})
				return group
			},
			plate(){
				let plate = []
				this.plateList.forEach( item => {
					plate.push({
						label : item.value,
						value : item.key
					})
				})
				return plate
			}
		},
		methods:{
			closeOptions(){
				let _this = this
				document.onclick = function(e){
					_this.plates = false
				}
			},
			handleTab(index){
				this.tab = index
			},
			getReaderInfo(){
				let info = {
					uid 	: this.uid,
					token   : this.token,
					shop_id : this.shop_id
				}
				return info
			},
			//获取版式图片
			getPlatePic(index){
				this.showPlate = true
				this.platePic = this.plateList[index].img_path
			},
			//控制版式的显示
			handlePlate(){
				this.plates = true
			},
			//点击选择排序方式
			amendSortType(val){
				this.$confirm('您确定使用该排序方式吗?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		        	this.setSort(val)
		        	console.log('123')
		        }).catch(() => {
		        	this.sortType = ''
		        })
			},
			setSort(id){

			},			
			//点击设置版式
			setFormat(item){				
				this.$confirm('您确定使用该版式吗?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		        	this.plat = item.title
		        	this.setBan(item.id)
		        	this.plates = false
		        }).catch( () => {
		        	this.plates = false
		        })
			},
			//设置版式
			setBan(id){
				let info = {
					shop_id : this.shop_id,
					id      : this.groupId,
					temp_id : id
				}
				let url = '/platform/read/setplate.json?uid='+this.uid+'&token='+this.token
				this.$axiosPost(url,info,true).then( res => {
					if(res.code === 200){
						this.$message({message:'版式设置成功',type:'success'})
					}
				})
			},
			//切换当前的分组
			changeGroup(index,item){
				this.gcurrent = index
				this.disabled = false
				if(!item){	//全部商品
					this.groupTitle = '全部文章'
					this.groupId    = 'all'
					this.actGroup()
					return
				}
				//其余分组
				this.groupTitle = item.title
				this.groupId   	= item.id
				this.updateName = item.title
				this.actGroup()
			},
			//点击右边分组，查询列表
			actGroup(){
				let info = Object.assign(this.getReaderInfo(),{
					id    : this.groupId,
					page  : this.page,
					limit : this.pageSize
				})
				this.loading = true
				this.$axiosGet('/platform/read/actgroup.json',info,true).then( res => {
					this.loading = false
					if(res.code === 200){
						this.readerList = res.data
						this.totalCount = res.count
					}
					if(res.code === 404){
						this.readerList = []
					}
				})
			},
			//编辑当前的分组
			updateGroup(){
				let info = {
					rename  : this.updateName,
					tag_id  : this.groupId,
					shop_id : this.shop_id
				}
				if(!this.updateName){
					return
				}
				let url = '/platform/read/edit.json?uid='+this.uid+'&token='+this.token
				this.$axiosPost(url,info,true).then(res => {
					if(res.code === 200){
						this.$message({message:'修改成功',type:'success'})
						this.showUpdate = false
						this.getGroup()
						this.groupTitle = this.updateName
					}
				})

			},
			//添加文章到该组
			addArticle(){

			},
			//删除当前的分组
			deleteGroup(){
				let info = {
					tag_id  : this.groupId,
					shop_id : this.shop_id
				}
				let url = '/platform/read/delgroup.json?uid='+this.uid+'&token='+this.token
				this.$confirm('删除分组并不会删除分组下面的文章', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		        	//点击确定
		        	this.$axiosPost(url,info,true).then( res => {
						if(res.code === 200){
							this.$message({message:'删除成功',type:'success'})
							this.getGroup()
							this.getReaderList()
							this.groupTitle = '全部文章'
							this.gcurrent = this.groupId = 'all'
						}
					})
		        }).catch( () => {
		        	//点击取消
		        })

			},
			//添加到分组
			addToGroup(val){
				if(!val){
					let nids = []
					this.selectList.forEach( item => {
						nids.push(item.id)
					})
					this.$confirm('您确定移动到此分组?', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
			        	//点击确定
			        	let info = {
							nid    : nids.join(','),
							tag_id : this.selectArt
						}
						let url = '/platform/read/movegroup.json?uid='+this.uid+'&token='+this.token
						this.$axiosPost(url,info,true).then( res => {
							if(res.code === 200){
								this.$message({message:'操作成功',type:'success'})
							}
							if(res.code === 404){
								this.$message({message:'操作失败',type:'error'})
							}
						})
			        }).catch( () => {
			        	//点击取消
			        })

				}				
			},
			//获取所有的版式
			getPlateList(){
				let info = this.getReaderInfo()
				delete info.shop_id
				this.$axiosGet('/platform/read/material.json',info,true).then( res => {
					if(res.code === 200){
						this.plateList = res.data
					}
				})
			},
			//按条件搜索
			handleSearch(){
				let info = {
					//tag_id   : this.serGroup,					
					keyword  : this.serTitle,
					isshow   : this.status
				}
				console.log(info)
				let url = `/platform/read/search.json?uid=${this.uid}&token=${this.token}&shop_id=${this.shop_id}&page=${this.page1}&limit=5`
				this.$axiosPost(url,info,true).then( res => {
					if(res.code === 200){
						this.readerList = res.data
						this.totalCount = res.count
					}
					if(res.code === 404){
						this.readerList = []
						this.$message({message:"没有搜索到匹配的数据",type:'warning'})
					}
				})
			},
			goPage(val){
				this.page = val
				this.getReaderList()
			},
			goPage1(val){
				this.page1 = val
				this.handleSearch()
			},
			//批量下/下架
			lowerFreme(isshow){
				//如果没有选择数据，不做处理
				if(!this.selectArr.length){
					return
				}
				let lowerArr = []
				this.selectArr.forEach( item => {
					lowerArr.push(item.id)
				})
				let info = {
					id 	   : lowerArr,
					isshow : isshow
				}
				let url = `/platform/read/isshow.json?uid=${this.uid}&token=${this.token}`
				this.$axiosGet(url,info,true).then( res => {
					if(res.code === 200){
						this.handleSearch()
						this.$message({message:'操作成功',type:'success'})
					}					
					if(res.code === 404){
						this.$message({message:'操作失败',type:'error'})
					}
				})
			},
			//批量删除
			delFreme(){
				//如果没有选择数据，不做处理
				if(!this.selectArr.length){
					return
				}
				this.$confirm('您确定删除吗?', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
			        	//点击确定
			        	let info = {

						}
						let url = '/platform/read/movegroup.json?uid='+this.uid+'&token='+this.token
						this.$axiosPost(url,info,true).then( res => {
							if(res.code === 200){
								this.$message({message:'删除成功',type:'success'})
							}
						})
			        }).catch( () => {
			        	//点击取消
			        })
			},
			//控制添加选择框的显示
			handleSelect(val){
				if(val){
					this.disabled = false
				}
				this.selectList = val
			},
			//获取table选择框选中的数据
			handleSelectionChange(val){
				this.selectArr = val
			},
			//移出此组
			removeGroup(){
				//获取要移出文章的id
				let delIds = []
				console.log(this.selectList)
				this.selectList.forEach( (item,index) => {
					delIds.push({
						nid     : item.id,
						tag_id  : item.tag_id
					})
				})
				//如果没有选择文章，不做处理
				if(!delIds.length){
					return
				}
				if(this.groupTitle === '全部文章'){
					this.$message({message:'该分组不支持此操作',type:'warning'})
					return
				}
				console.log(delIds)
			    this.$confirm('确定移出此组吗?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		        	let url = `/platform/read/moveanddelete.json?uid=${this.uid}&token=${this.token}`
		        	this.$axiosPost(url,delIds,true).then( (res) => {
		        		if(res.code === 200){
		        			this.readerList.forEach( (item,index) => {
		        				delIds.forEach( items => {
		        					if(item.id === items.id){
		        						this.readerList.splice(index,1)
		        					}
		        				})
		        			})
		        			this.$message({message:'移出分组成功',type:'success'})
		        		}
		        		if(res.code === 404){
		        			this.$message({message:'移出分组失败',type:'error'})
		        		}
		        	})
		        }).catch(()=>{

		        })
			},
			//新建分组
			createGroup(){
				let url = '/platform/read/addgroup.json?uid='+this.uid+'&token='+this.token+'&shop_id='+this.shop_id
				if(!this.groupName){
					return
				}
				this.$axiosPost(url,{title:this.groupName},true).then( res => {
					if(res.code === 200){
						this.showAdd = false
						this.getGroup()
					}
					if(res.code === 404){
						this.$message({message:'新建失败',type:'error'})
					}
				})			
			},
			changeStatu(index,status){
				this.currentPage = 1
				this.page1       = 1			
				this.tcurrent = index
				this.status = status
				this.handleSearch()
				// if(index == 1){
				// 	this.status = 1
				// 	this.getTableList()
				// }
				// if(index == 2){
				// 	this.status = -1
				// 	this.getTableList()
				// }
			},
			//查询所有分组
			getGroup(){
				let info = this.getReaderInfo()
				this.$axiosGet('/platform/read/grouping.json',info,true).then(res => {
					if(res.code === 200){
						this.groupList = res.data
					}
				})
			},
			//获取分组文章
			getReaderList(){
				this.loading = true
				let info   = this.getReaderInfo()
				info.page  = this.page
				info.limit = this.pageSize
				info.id    = this.groupId				
				this.$axiosGet('/platform/read/index.json',info,true).then( res => {
					this.loading = false
					if(res.code === 200){
						this.readerList = res.data
						this.totalCount = res.count
					}
					if(res.code === 404){
						this.$message({message:'暂时没有数据',type:'success'})
					}
				})
			},
			//文章单条下架
			singleUnd(id,isshow){
				let info = {
					id 	   : [id],
					isshow : isshow
				}
				console.log(info)
				let url = `/platform/read/isshow.json?uid=${this.uid}&token=${this.token}`
				this.$axiosGet(url,info,true).then( res => {
					if(res.code === 200){
						this.handleSearch()
						this.$message({message:'操作成功',type:'success'})
					}					
					if(res.code === 404){
						this.$message({message:'操作失败',type:'error'})
					}
				})
			}

		}
	}
</script>
<style lang="less" scoped>
	@editColor:#576b95;
	@bgColor:#f6f8f9;
	@borderColor:#d9dadc;
	@activeColor:#797979;
	@activeTab:#8da7d0;
	.article /deep/ .el-input{
		width: 140px;
	}
	.article-tab{
		line-height: 40px;
		background: @bgColor;
		.tab-item{
			padding: 0 15px;
			border-right: 1px solid @borderColor;
			font-size: 14px;
			cursor: pointer;
		}
		.tab-active{
			color:@activeTab;
		}
		.tab-item:last-of-type{
			border: none;
		}
		.active{
			color:@activeColor;
		}
	}
	.con-warrp{
		margin: 0 auto;
		margin-top: 20px;
		width: 95%;
		border:1px solid @borderColor;
		.left-con{
			float: left;
			width:80%;
			border-right: 1px solid @borderColor;
			.top-bar{
				padding-left: 20px;
				height: 40px;
				line-height:40px;
				background: #e0eaf6;
				.edit-icon{
					color:#00aeef;
				}
			}
			.group-name{
				padding-left: 20px;
				.group-item{
					display:inline-block;
					margin-right: 20px;
					line-height:40px;
				}
				.edit-item{
					color: #8da7d0;
					cursor: pointer;
				}
			}
			.filter{
				margin-top: 10px;
				position: relative;
				padding-left: 20px;
				.select{
					vertical-align: top;
					position: relative;
					display: inline-block;
					padding: 0 10px;
					height: 32px;
					line-height: 30px;
					min-width:100px;
					border: 1px solid #eee;
					border-radius: 4px;
					font-size: 14px;
					color:#ccc;
					cursor: pointer;
					.option-warrp{
						z-index: 999;	
						position: absolute;
						top: 31px;
						left: 0;
						background: #fff;
						.option{							
							position: relative;												
							min-width: 200px;
							padding: 10px 0;
							height: 300px;						
							list-style: none;							
							font-size: 14px;
							.option-item{
								padding:0 10px;
								line-height: 24px;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								color:#606266;
							}
							.option-item:hover{
								background: #eee;
							}
						}
						.item-pic{
							z-index: 999;
							position: absolute;
							top: 0;
							left: 100%;
							min-width: 200px;
							height: 200px;
							box-shadow: 1px 1px 6px #ccc;
							background: #fff;
						}
					}
				}
			}
			.operation{
				margin-top: 20px;
				position: relative;
				padding: 10px 20px;
				background: @bgColor;
				.add-btn{
					position: absolute;
					right: 10px;
				}
			}
			.table{
				padding: 0 20px;
			}
		}
		.right-con{
			float: left;
			width: 20%;						
			.group-title{
				padding-left: 20px;
				line-height:40px;
				font-size: 14px;
				cursor: pointer;
			}
			.gactive{
				background-color: #f0f0f0;
			}
			.slide-enter-active,.slide-leave-active{
				transition: height .5s;
			}
			.slide-enter,.slide-leave-to{
				height: 0px;
			}
			.group-item{
				padding-left: 40px;
				line-height:25px;
				font-size: 14px;
				cursor: pointer;
			}
			
			.btn{
				margin-left: 20px;
				height: 35px;
				line-height:35px;
				cursor: pointer;
			}
		}	
	}
	.on-shelf{
		width: 90%;
		margin: 0 auto;
		margin-top: 12px;
		text-align: left;
		.filter-con{
			overflow: hidden;
			.filter-item{
				float: left;
				margin-right: 10px;
				.title{
					height: 37px;
					padding:8px 0;
				}
				.ipt-warrp{
					float: left;
				}
				.space{
					height: 40px;
					line-height: 40px;
					padding:0 5px;
				}
				.btn{
					width: 100px;
					height: 40px;
					line-height: 40px;
					text-align: center;
					background: #3ca0ec;
					color: #fff;
					border-radius: 3px;
					cursor: pointer;
					font-size: 14px;
				}
			}
		}
		.shelf-con{
			margin-top: 20px;
			background: #f4f5f9;
			border:1px solid #f4f4f6;
			.tab-con{
				padding: 10px 15px;
				font-size: 0;
				border-bottom:1px solid #e7e8ec;
				.tab-item{
					display: inline-block;
					height: 30px;
					width: 90px;
					line-height: 30px;
					text-align: center;				
					font-size: 14px;
					border:1px solid #cbccd0;
					cursor: pointer;
				}
				.tab-item:nth-of-type(1){
					border-radius: 3px 0 0 3px;
				}			
				.tab-item:nth-of-type(2){
					margin-left: -1px;
					border-radius: 0 3px 3px 0;
				}
				.active{
					border-color:#3ca0ec;
					background: #3ca0ec;
					color: #fff
				}
			}
			.operat-con{
				overflow: hidden;
				padding: 10px 15px;
				border-bottom:1px solid #e7e8ec;
				.left-btn{
					float: left;
					width: 100px;
					height: 30px;
					margin-right: 15px;
					line-height: 30px;
					text-align: center;
					background: #e7e7eb;
					color: #b6acac;
					border-radius: 3px;
					cursor: pointer;
					border:1px solid #cbccd0;
				}
				.l-active{
					background: #3ca0ec;
					color: #fff;
				}
				.right-btn{
					float: right;
					width: 120px;
					height: 30px;
					line-height: 30px;
					text-align: center;
					background: #3ca0ec;
					color: #fff;
					border-radius: 3px;
					cursor: pointer;
				}

			}
		}
		.op-btn{
			cursor: pointer;
		}

	}
	
</style>